<template>
	<view class="home-index">
		<view class="uni-flex uni-row funList">
			<view class="flex-item" v-for="(item, index) in funList" :key="'fun-' + index"
				@click="goToPage(item.pageUrl)">
				<image :src="'/static/images/funList-' + (index + 1) + '.png'" :alt="item" />
				<view>{{ item.ladel }}</view>
			</view>
		</view>
		<view class="group uni-flex uni-row HydroelectricMall" @click="goToPage('/homePages/mall/mall')">
			<view class="flex-item flex-item-tit">
				<view class="tit">水电商城</view>
				<image src="/static/images/HydroelectricMall.png" />
			</view>
			<view class="flex-item" v-for="(item, index) in HydroelectricMall" :key="'fun-' + index">
				<image :src="'/static/images/d-' + (index + 1) + '.png'" :alt="item" />
				<view>{{ item }}</view>
			</view>
		</view>
		<view class="group uni-flex uni-row RegistrationService"
			@click="goToPage('/pages/demandHall/index?tabIndex=0')">
			<view class="flex-item flex-item-tit">
				<view class="tit">报名服务</view>
				<image src="/static/images/RegistrationService.png" />
			</view>
			<view class="flex-item" v-for="(item, index) in RegistrationService" :key="'fun-' + index">
				<image :src="'/static/images/b-' + (index + 1) + '.png'" :alt="item" />
				<view>{{ item }}</view>
			</view>
		</view>

		<view class="group notice-bar">
			<view class="news-tit">
				<icon class="news" />
			</view>
			<view class="news-list">
				<uni-notice-bar class="notice" moreColor="#000" color="#000" background-color="none" :speed="60" single
					scrollable showGetMore @getmore="goToPage('https://shuidianbang.net/web_app/page/ISP.html')"
					text="为加速平台生态建设，助力用户高效运营，推出以下激励政策与服务:" />
			</view>
		</view>

		<view class="group swiper-group">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item @click="goToPage('/homePages/addDemand/index')">
					<image
						src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/be2f139a-473d-405a-80f0-7d6b81a254c9.png"
						alt="" srcset="" />
				</swiper-item>
				<swiper-item @click="goToPage('https://shuidianbang.net/web_app/page/EMRSM.html')">
					<image
						src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/35dce336-40a6-44c8-9f87-889c07974970.png"
						alt="" srcset="" />
				</swiper-item>
				<swiper-item @click="goToPage('https://shuidianbang.net/web_app/page/EMRSM.html')">
					<image
						src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/a7d16339-07d1-43bd-815f-3780c7536d58.png"
						alt="" srcset="" />
				</swiper-item>
				<swiper-item @click="goToPage('https://shuidianbang.net/web_app/page/EMRSM.html')">
					<image
						src="https://shuidianbang.oss-cn-chengdu.aliyuncs.com/ceshi/c9e5a350-56c9-444d-9d71-0eabba65cf81.png"
						alt="" srcset="" />
				</swiper-item>
			</swiper>
		</view>

		<view class="group hydroelectric-communication">
			<view class="jl" @click="goToPage('/homePages/community/community')">
				<view class="tit">水电交流空间 <icon class="more-right"></icon>
				</view>
				<text>绿色能源的智慧对话平台</text>
			</view>
			<view class="px" @click="goToPage('/homePages/training/index')">
				<view class="tit">数智水电学院 <icon class="more-right"></icon>
				</view>
				<text>培育水电精英</text>
			</view>
		</view>

		<view class="group release-requirements">
			<button class="send" @click="goToPage('/homePages/addDemandStarter/index')">一键发布需求</button>
		</view>
		<view class="group help-list">
			<view class="list-tit">
				<view class="left">
					<icon class="icon-book"></icon>
					<strong>专家&工程师</strong>
				</view>
				<view class="right" @click="getResumesRandApi">
					<uni-icons type="refreshempty" size="14" color="#22A366"></uni-icons>
					<text>换一批</text>
				</view>
			</view>
			<view class="list-engineer">
				<view class="list-engineer-item" @click="goToPage('https://shuidianbang.net/web_app/resume/' + item.id)"
					:title="item.name" :note="item.place" v-for="(item, index) in engineerList"
					:key="'list-engineer-' + index">
					<view class="lt">
						<view class="name">{{ item.ref_user.nick }}</view>
						<view class="stit">
							<view class="area" v-show="item.ref_user.area.lid !== 0">
								{{ item.ref_user.area.name }}
							</view>
							<text>社区等级：{{ item.ref_user.comm_exp }}</text>
						</view>
					</view>
					<view class="rt">
						<image class="slot-image" :src="item.ref_user.avatar"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="group help-list">
			<view class="list-tit">
				<view class="left">
					<icon class="icon-book"></icon>
					<strong>本地热点</strong>
				</view>
				<view class="right" @click="goToPage('/homePages/article/list?pageTitle=本地热点&type=local')">
					<text>更多</text>
					<uni-icons type="right" size="15" color="#22A366"></uni-icons>
				</view>
			</view>
			<view class="list-con">
				<view class="list-con-item" v-for="(item, index) in helpList" :key="'list-con-' + index"
					@click="goToPage('https://shuidianbang.net/web_app/article/' + item.id)">
					{{ item.title }}
				</view>
			</view>
		</view>
		<view class="group help-list">
			<view class="list-tit">
				<view class="left">
					<icon class="icon-book"></icon>
					<strong>行业热点</strong>
				</view>
				<view class="right" @click="goToPage('/homePages/article/list?pageTitle=本地热点&type=local')">
					<text>更多</text>
					<uni-icons type="right" size="15" color="#22A366"></uni-icons>
				</view>
			</view>
			<view class="list-con">
				<view class="list-con-item" v-for="(item, index) in hyList" :key="'list-con-' + index"
					@click="goToPage('https://shuidianbang.net/web_app/article/' + item.id)">
					{{ item.title }}
				</view>
			</view>
		</view>
		<view class="group veterans-list">
			<view class="list-tit">
				<view class="left">
					<icon class="icon-book icon-veterans"></icon>
					<strong>退役军人专区 </strong>
				</view>
				<view class="right" @click="goToPage('/homePages/article/list?pageTitle=退役军人专区&type=mii')">
					<text>更多</text>
					<uni-icons type="right" size="15" color="#22A366"></uni-icons>
				</view>
			</view>
			<view class="list-con">
				<view class="list-con-item" v-for="(item, index) in veteransList" :key="'list-con-' + index"
					@click="goToPage('https://shuidianbang.net/web_app/article/' + item.id)">
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		publics
	} from '@/mixins/publics.js';

	import {
		getResumesRand, // 获取随机四个简历
		getArticleListLocal, // 本地热点
		getArticleListMii, // 退役军人专区
		getArticlesLocal, // 本地热点 更多
		getArticlesMii ,// 退役军人 更多
		getArticleListhy // 行业热点
	} from '@/utils/api.js'

	export default {
		mixins: [publics],
		data() {
			return {
				funList: [{
						ladel: '找人服务',
						pageUrl: '/homePages/addDemand/index'
					},
					{
						ladel: '我的公益',
						pageUrl: '/myPages/publicWelfare/index'
					},
					{
						ladel: '我要推广',
						pageUrl: '/myPages/task/promotion'
					},
					{
						ladel: '备件采购',
						pageUrl: '/pages/demandHall/index?tabIndex=1'
					}
				],
				// HydroelectricMall: ['智能网关', '传感仪表', '控制器', '水泵阀门'],
				HydroelectricMall: ['智能网关', '传感仪表', '水泵阀门'],
				// RegistrationService: ['数据采集', '安装调试', '远程诊断', '方案定制'],
				RegistrationService: ['数据采集', '安装调试', '方案定制'],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 4000,
				duration: 500,
				scrollPosition: 0,
				helpList: [],
				hyList: [],
				veteransList: [],
				engineerList: []
			}
		},
		methods: {
			// 页面数据初始化
			handleInitData() {
				this.getArticleListLocalApi();
			},

			// 随机获取4个工程师
			getResumesRandApi() {
				getResumesRand().then(res => {
					if (res.code === 200) {
						this.engineerList = res.data.resumes;

					}
				})
			},

			// 本地热点
			getArticleListLocalApi() {
				getArticleListLocal().then(res => {
					if (res.code === 200) {
						this.helpList = res.data.docs;
						this.getResumesRandApi();
						this.getArticleListMiiApi();
						this.getArticleListhyApi();
					}
				})
			},
			
			// 行业热点
			getArticleListhyApi() {
				getArticleListhy().then(res => {
					if (res.code === 200) {
						this.hyList = res.data.docs;
					}
				})
			},
			
			// 退役军人专区
			getArticleListMiiApi() {
				getArticleListMii().then(res => {
					if (res.code === 200) {
						this.veteransList = res.data.docs;
					}
				})
			}

		}
	}
</script>

<style lang="scss">
	.home-index {
		background-color: #EDF4F8;
		position: relative;
		z-index: 2;

		&>.group {
			margin: auto;
			margin-bottom: 10px;
			width: 94.67vw;
			box-sizing: border-box;
		}

		.funList {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			text-align: center;
			color: #1E1F23;
			font-size: 3.2vw;
			margin-top: 21rpx;

			image {
				width: 12.27vw;
				height: 12.27vw;
				margin-bottom: 5rpx;
			}
		}

		.HydroelectricMall,
		.RegistrationService {
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;
			color: #2C2C2C;
			font-size: 12px;
			background-image: radial-gradient(circle at 4.2% -67%, #35CE8D 0%, #FFFFFF 20%);
			border-radius: 10px;
			margin-top: 17px;
			padding: 0px 16rpx;
			height: 80px;

			.flex-item {
				width: 180rpx;
			}

			.flex-item-tit {
				width: 176rpx;
				margin: 0;
				position: relative;

				&>.tit {
					width: 56px;
					font-family: PingFangSC-Semibold;
					font-weight: 600;
					font-size: 24rpx;
					color: #020302;
					letter-spacing: 0;
					text-align: center;
					position: relative;
					top: 4rpx;
				}

				image {
					width: 106rpx;
					height: 110rpx;
					float: left;
				}

				&::after {
					content: '';
					width: 5.52px;
					height: 73px;
					background: url('/static/images/more.png') no-repeat 0 0;
					background-size: 100% 100%;
					position: absolute;
					top: 6px;
				}
			}

			image {
				width: 36px;
				height: 36px;
			}
		}

		.RegistrationService {
			margin-top: 10px;

			.flex-item-tit {
				image {
					width: 53px;
					height: 53px;
					margin: 0;
					position: relative;
					top: 0;
				}
			}
		}

		.notice-bar {
			background: #FFFFFF;
			border-radius: 6px;
			padding: 10px 13px;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: stretch;

			.news-tit {
				.news {
					width: 50px;
					height: 18px;
					background: url("/static/images/news.png") no-repeat 0 0;
					background-size: 100%;
				}

				&::after {
					display: inline-block;
					content: "";
					width: 1rpx;
					height: 19.16px;
					opacity: 0.4;
					background-color: #979797;
					position: relative;
					top: 2px;
					margin-left: 6px;
				}
			}

			.news-list {
				height: 23px;
				line-height: 23px;
				font-weight: 400;
				width: calc(100% - 52px - 13px - 3%);
				padding-left: 3%;

				.notice {
					width: 100%;
					height: 23px;
					line-height: 23px;
					margin: 0;
					padding: 0;
				}
			}
		}


		.swiper-group {
			.swiper {
				height: 22vw;

				image {
					width: 100%;
					height: 22vw;
				}
			}
		}

		.hydroelectric-communication {
			height: 84px;
			background: #FFFFFF;
			border-radius: 8px;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.jl,
			.px {
				width: 50%;
				height: 84px;
				position: relative;
				padding: 15px;
				box-sizing: border-box;
				font-family: PingFangSC;

				&::after {
					display: inline-block;
					content: '';
					width: 45.16px;
					height: 42.74px;
					position: absolute;
					bottom: 10px;
					right: 14px;
				}

				.tit {
					font-size: 14px;
					position: relative;

					.more-right {
						width: 12px;
						height: 6px;
						background: url("/static/images/icon/more2.png") no-repeat 0px 0px;
						background-size: 100% 100%;
						position: absolute;
						margin: auto;
						top: 0;
						bottom: 0;
						margin-left: 6px;
					}
				}

				text {
					font-size: 11px;
					color: #757F8A;
				}
			}

			.jl {
				&::after {
					background: url("/static/images/jl.png") no-repeat 0px 0px;
					background-size: 100% 100%;
				}
			}

			.px {
				&::before {
					display: inline-block;
					content: '';
					width: 2rpx;
					height: 75px;
					opacity: 0.2;
					background-color: #979797;
					position: absolute;
					left: -1rpx;
					top: 0;
					bottom: 0;
					margin: auto;
				}

				&::after {
					background: url("/static/images/px.png") no-repeat 0px 0px;
					background-size: 100% 100%;
				}
			}
		}

		.release-requirements {
			.send {
				background-image: linear-gradient(97deg, #00D45C 0%, #00AD75 100%);
				border-radius: 8px;
				height: 90rpx;
				line-height: 90rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 40rpx;
				color: #FFFFFF;
			}
		}

		.list-engineer {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			background-color: #fff;
			padding-top: 12px;

			.list-engineer-item {
				width: 40.8vw;
				height: 81px;
				background: #F5F6FA;
				border-radius: 8px;
				padding: 17px 12px;
				box-sizing: border-box;
				margin-bottom: 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&:nth-last-child(1),
				&:nth-last-child(2) {
					margin: 0;
				}

				.lt {
					width: calc(40.8vw - 24px - 47px - 4px);
				}

				.name {
					font-family: PingFangSC-Semibold;
					font-weight: bold;
					font-size: 14px;
					color: #1F1E23;
				}

				.stit {
					opacity: 0.6;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 12px;
					color: #1F1E23;
					margin-top: 5px;

					.area {
						margin-right: 4px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.rt {
					.slot-image {
						width: 43px;
						height: 43px;
						border-radius: 43px;
						margin-left: 4px;
					}
				}
			}
		}

		.help-list,
		.veterans-list {
			padding: 18px 16px;
			overflow: hidden;
			height: auto;
			background-color: #fff;
			border-radius: 8px;

			.list-tit {
				display: flex;
				justify-content: space-between;

				.left {
					color: #2C2C2C;
					font-weight: 600;
					font-size: 14px;
					display: flex;
					align-items: center;

					.icon-book {
						width: 12px;
						height: 12px;
						background: url('/static/images/icon/book.png') no-repeat 0 0;
						background-size: 100% 100%;
						margin-right: 7px;
						
						&.icon-veterans{
							width: 30rpx;
							height: 30rpx;
							background: url('/static/images/icon/veterans.png') no-repeat 0 0;
							background-size: 100% 100%;
						}
					}
					
					
				}

				.right {
					font-weight: 600;
					font-size: 12px;
					color: #22A366;
					display: flex;
					align-items: center;

					&>.uniui-right {
						color: #22A366 !important;
					}
				}
			}

			.list-con {
				font-size: 12px;
				color: #2C2C2C;
				// height: 140px;
				overflow: auto;
				margin-top: 15px;
				box-sizing: border-box;

				&>.list-con-item {
					height: 17px;
					line-height: 17px;
					margin-bottom: 11px;

					&:last-child {
						margin-bottom: 0;
					}

					&:last-child {
						margin-bottom: 0;
					}

					&::before {
						content: '';
						display: inline-block;
						width: 5px;
						height: 5px;
						background: #22A366;
						margin-right: 9px;
						position: relative;
						top: -2px;
					}
				}
			}
		}
	}
</style>